/**
 * 子基准  下拉列表结构
 * by hly
 * create 2022-02-24
 */
import React from 'react';
import { connect } from 'dva';
import PropTypes from 'prop-types';
import { QuestionCircleOutlined } from '@ant-design/icons';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Select, Tooltip } from 'antd';
import { FormItemLayout, NoLableLayout } from '../../form/formPub.js';
import debounce from 'lodash/debounce';
import styles from './index.less';
const { Option } = Select;

class ChildBenchMarkC extends React.PureComponent {
  // props默认值
  static defaultProps = {
    title: '子基准',
    placeholder: '请选择子基准',
    helper: '',
    onChange: () => {},
    onRef: () => {}, // 本组件的引用
    width: '100%',
    rules: [], // 默认无校验规则
    formItemLayout: FormItemLayout, // 设置表单默认布局
    NoLableLayout: NoLableLayout,
    allowClear: true, // 默认可删除
    disabled: false, // 默认不禁用
    toolTipPlace: 'top', // tooltip显示位置
    includeBench: 0, // 是否包含自定义的子基准, 0) 不包含 1) 包含
    addClassName: false,
    keyFlag: false, //判断初始值是true-自定义还是false-其他
  };

  constructor(props) {
    super(props);

    this.state = {
      benchData: undefined, // 子基准数据
      dataSource: [],
      tooltipInfo: '', // 鼠标移动到组件，展示当前选中项全称
      isChange: false, //datasource是否改变
      tempDataSource: [], //存储无查询条件时的数据
    };
    // 绑定lodash的防抖函数，避免频繁搜索的情况
    this.onSearch = debounce(this.onSearch, 500);
  }

  componentDidMount() {
    // 父组件对本组件的引用
    this.props.onRef && this.props.onRef(this);
    //存储无查询条件时的数据
    this.props.dispatch({
      type: 'BaselineInformationNewM/getBenchmarkData',
      payload: {
        includeBench: this.props.includeBench,
      },
      callback: (data) => {
        console.log('111');
        this.setState({
          tempDataSource: [...data],
        });
      },
    });
    // 调用接口，获取子基准数据
    this.getBenchmarkData(this.props.keyFlag, this.props.initialValue, this.props, (e) => {
      this.setState(
        {
          dataSource: e,
        },
        () => {
          // 若有初始化值，则设置tooltip
          if (this.props.initialValue != undefined && this.props.initialValue != null) {
            this.setTooltip(this.props.initialValue);
          }
        },
      );
    });
  }

  UNSAFE_componentWillReceiveProps(nextProps) {
    // 处理当重置时，清空tooltip
    let value = nextProps.form.getFieldValue(nextProps.dataIndex);
    this.setTooltip(value);
    // 处理异步初始化设置tooltip
    const initT = this.props.initialValue;
    const initN = nextProps.initialValue;
    if (initT != initN) {
      this.setTooltip(nextProps.initialValue, nextProps);
    }
  }

  // 设置tooltip
  setTooltip = (e, propT = this.props) => {
    if (this.state.benchData == undefined) return;

    let tooltipInfo = '';
    if (e != undefined && e != null) {
      let find = this.state.benchData?.filter((item) => e == item.value);
      if (find && find.length > 0) {
        tooltipInfo += find[0].title;
      }
    }
    this.setState({
      tooltipInfo: tooltipInfo == '' ? '' : <div style={{ whiteSpace: 'pre' }}>{tooltipInfo}</div>,
    });
  };

  // 调用接口，获取子基准数据
  getBenchmarkData = (flag, query, propT = this.props, callback) => {
    // 查询之前，先清空原数据
    this.setState({
      dataSource: undefined,
      loading: true,
      tooltipInfo: '',
    });
    // 查询参数
    let params = {};
    if (propT.includeBench == 0 && query) {
      // 不包含自定义基准
      params = {
        keyWord: query,
      };
    } else if (propT.includeBench == 1 && query) {
      // 包含自定义基准
      if (flag) {
        params = {
          benchmarkId: query,
        };
      } else {
        params = {
          keyWord: query,
        };
      }
    }

    this.props.dispatch({
      type: 'BaselineInformationNewM/getBenchmarkData',
      payload: {
        includeBench: propT.includeBench,
        ...params,
      },
      callback: (data) => {
        this.setState({
          benchData: [...data],
        });
        callback(data);
      },
    });
  };

  // 非初始化状态下更改下拉选项(供父组件调用)
  setSelect = (value) => {
    const valueF = {};
    valueF[this.props.dataIndex] = value;
    this.props.form.setFieldsValue(valueF);

    // 触发子基准切换事件
    this.onChange(value);
    // 修改tooltip
    this.setTooltip(value);
  };

  // 模糊搜索
  onSearch = (query) => {
    if (!query) {
      // 搜索条件为空时，清空数据源
      this.setState({
        dataSource: this.state.tempDataSource,
      });
    } else {
      this.timer ? clearTimeout(this.timer) : '';
      this.timer = setTimeout(() => {
        this.getBenchmarkData(false, query, this.props, (e) => {
          this.setState(
            {
              dataSource: e,
              isChange: true,
            },
            () => {
              // 若有初始化值，则设置tooltip
              if (this.props.initialValue != undefined && this.props.initialValue != null) {
                this.setTooltip(this.props.initialValue);
              }
            },
          );
        });
      }, 500);
    }
  };

  // 展开下拉回调
  onDropdownVisibleChange = (open) => {
    if (open) {
      this.setState({
        dataSource: this.state.benchData == undefined ? [] : this.state.benchData,
      });
    }
  };

  // 子基准切换事件
  onChange = (e) => {
    if (!e) {
      // 触发选项切换事件
      this.props.onChange(null);
      // 更改tooltip显示内容
      this.setState({
        tooltipInfo: '',
      });
      // if (this.state.isChange) {
      this.setState({
        dataSource: this.state.tempDataSource,
        isChange: false,
      });
      // }
    } else {
      let ds = this.state.dataSource.filter((item) => {
        return item.value === e;
      });

      let temp = 0; //判断该条数据是否是自定义子基准,0-否，1-是
      if (ds && ds.length === 1) {
        if (ds[0].title?.indexOf('【自定义】') != -1) {
          // 选中数据为自定义子基准
          temp = 1;
        }
      }
      // 对外抛出事件
      this.props.onChange(ds && ds.length === 1 ? { key: e, info: ds[0], flag: temp } : undefined);
    }
  };

  render() {
    const { addClassName, styleRow, form, title, dataIndex, initialValue, placeholder, helper, width, rules, formItemLayout, allowClear, disabled, toolTipPlace } = this.props;
    const { getFieldDecorator } = form;

    return (
      <Form.Item
        className={addClassName ? styles.removeLabel : ''}
        labelCol={title ? formItemLayout.labelCol : NoLableLayout.labelCol}
        wrapperCol={title ? formItemLayout.wrapperCol : NoLableLayout.wrapperCol}
        label={
          title ? (
            helper ? (
              <span>
                {title}&nbsp;
                <Tooltip title={helper}>
                  <QuestionCircleOutlined />
                </Tooltip>
              </span>
            ) : (
              <span>{title}</span>
            )
          ) : undefined
        }
      >
        <Tooltip title={this.state.tooltipInfo} placement={toolTipPlace}>
          {getFieldDecorator(dataIndex, {
            initialValue,
            rules: !!rules ? rules : [],
          })(
            <Select
              getPopupContainer={(triggerNode) => document.body}
              style={styleRow ? styleRow : { width: width }}
              placeholder={placeholder}
              onChange={this.onChange}
              allowClear={allowClear}
              filterOption={false}
              showSearch={true} // 使单选模式可搜索
              onSearch={this.onSearch} // 模糊搜索
              // onDropdownVisibleChange={this.onDropdownVisibleChange}
              disabled={disabled}
              mode={undefined}
            >
              {this.state.benchData != undefined
                ? this.state.dataSource?.length > 0
                  ? this.state.dataSource?.map((item) => (
                      <Option value={item.value} key={item.value}>
                        {item.title}
                      </Option>
                    ))
                  : [
                      <Option key={'blank'} value={'blank'} disabled>
                        无匹配的结果
                      </Option>,
                    ]
                : [
                    <Option key={'blank'} value={'blank'} disabled>
                      正在加载中...
                    </Option>,
                  ]}
            </Select>,
          )}
        </Tooltip>
      </Form.Item>
    );
  }
}

// props类型
ChildBenchMarkC.propsTypes = {
  form: PropTypes.object, // form对象
  title: PropTypes.string, // 显示名称
  dataIndex: PropTypes.string, // Form识别的Item ID
  initialValue: PropTypes.string, // 初始默认值
  placeholder: PropTypes.string, // 占位符
  onChange: PropTypes.func, // 输入框内容变化时的回调
  helper: PropTypes.oneOfType([
    // 提示帮助信息
    PropTypes.string,
    PropTypes.element,
  ]),
  onRef: PropTypes.func, // 本组件的引用（可用来父组件调用内部方法）
  rules: PropTypes.array, // 校验规则
  formItemLayout: PropTypes.object, // 设置表单布局
  allowClear: PropTypes.bool, // 设置是否可删除
  disabled: PropTypes.bool, // 是否禁用
  includeBench: PropTypes.number, // 是否包含自定义的子基准（复合类型的值为1，其他为0）
  keyFlag: PropTypes.bool, //初始值类似 是自定义还是股票+指数
};

export default connect(({ BaselineInformationNewM, loading }) => ({ BaselineInformationNewM, loading }))(ChildBenchMarkC);
